<template>
  <div>
    <!-- 头部搜索区域 -->
    <el-form inline :model="searchMap" ref="searchMap" class="demo-form-inline">
      <el-form-item prop="cardNum">
        <el-input v-model="searchMap.cardNum" placeholder="会员卡号"></el-input>
      </el-form-item>
      <el-form-item prop="name">
        <el-input v-model="searchMap.name" placeholder="会员名称"></el-input>
      </el-form-item>
      <el-form-item prop="payType">
        <el-select v-model="searchMap.payType" placeholder="支付类型">
          <el-option v-for="item in payTypeObj" :label="item.name" :key="item.type" :value="item.type"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="birthday">
        <el-date-picker v-model="searchMap.birthday" type="date" placeholder="出生年月">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="searchData"></el-button>
        <el-button icon="el-icon-circle-plus-outline" type="primary" @click="addMember"></el-button>
        <el-button icon="el-icon-refresh" type="primary" @click="resetForm('searchMap')"></el-button>
      </el-form-item>
    </el-form>
    <!-- 表单区域 -->
    <el-table :data="list" border style="width: 100%">
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="cardNum" label="会员卡号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="birthday" label="出生日期"></el-table-column>
      <el-table-column prop="phone" label="联系电话"></el-table-column>
      <el-table-column prop="integral" label="可用积分"></el-table-column>
      <el-table-column prop="money" label="可用金额"></el-table-column>
      <el-table-column prop="payType" label="支付类型">
        <template slot-scope="scope">{{scope.row.payType | payTypeFilter}}</template>
      </el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="editMember(scope.row.id)"></el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteMember(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total"></el-pagination>

    <!--新增/编辑 用户弹出窗口  -->
    <el-dialog :title="addList.id?'编辑会员':'新增会员'" :visible.sync="addDialogVisible" @close="resetAdd" width="550px">
      <el-form :model="addList" ref="addList" label-width="100px" label-position="right" style="width:400px">
        <el-form-item label="会员卡号" prop="cardNum">
          <el-input v-model="addList.cardNum"></el-input>
        </el-form-item>
        <el-form-item label="会员姓名" prop="name">
          <el-input v-model="addList.name"></el-input>
        </el-form-item>
        <el-form-item label="会员生日" prop="birthday">
          <el-input v-model="addList.birthday"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="addList.phone"></el-input>
        </el-form-item>
        <el-form-item label="开卡金额" prop="money">
          <el-input v-model="addList.money"></el-input>
        </el-form-item>
        <el-form-item label="支付类型" prop="payType">
          <el-select v-model="addList.payType" placeholder="请选择支付类型">
            <el-option v-for="item in payTypeObj " :key="item.type" :label="item.name" :value="item.type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会员地址" prop="address">
          <el-input v-model="addList.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addList.id?submitEdit(addList):submitAdd(addList)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import memberApi from "@/api/member";

  const payTypeObj = [{
      type: "1",
      name: "现金"
    },
    {
      type: "2",
      name: "微信"
    },
    {
      type: "3",
      name: "支付宝"
    },

    {
      type: "4",
      name: "银行"
    }
  ];

  export default {
    data() {
      return {
        list: [],
        payTypeObj,
        // 总条数
        total: 0,
        // 当前页码
        currentPage: 1,
        // 每页显示10条数据,
        pageSize: 10,
        // 条件查询
        searchMap: {
          cardNum: '',
          name: '',
          payType: '',
          birthday: ''
        },
        // 新增用户
        addDialogVisible: false,
        addList: {
          cardNum: '',
          name: '',
          payType: '',
          phone: '',
          money: '',
          birthday: ''
        }
      };
    },

    created() {
      this.searchData();
    },

    methods: {
      // 1、获取数据的接口
      searchData() {
        memberApi
          .search(this.currentPage, this.pageSize, this.searchMap)
          .then(res => {
            // console.log(res.data.data);
            this.total = res.data.data.total;
            this.list = res.data.data.rows;
          });
      },
      // 当每页显示条数改变后,被触发 , val是最新的每页显示条数
      handleSizeChange(val) {
        console.log("每页显示条数", val);
        this.pageSize = val;
        this.searchData();
      },
      // 当页码改变后,被触发 , val 是最新的页面
      handleCurrentChange(val) {
        console.log("当前页码", val);
        this.currentPage = val;
        this.searchData();
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 2、添加一个会员的信息
      addMember() {
        this.addDialogVisible = true
      },
      // 提交添加会员的信息
      submitAdd(data) {
        this.addList = data
        // console.log('新增用户信息', this.addList);
        memberApi.add(data).then(res => {
          console.log('新增用户信息', res);
        })
        this.addDialogVisible = false
      },
      // 重置表单信息
      resetAdd() {
        console.log(123);
        this.$refs.addList.resetFields();
        this.addList={}
      },
      // 3、删除一个会员的信息
      deleteMember(id) {
        console.log(id);
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          memberApi.delete(id).then(res=>{
            console.log(res.data);
          })
          this.searchData()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      // 4、编辑一条用户信息
      editMember(id) {
        memberApi.getById(id).then(res => {
          console.log(res);
          this.addList = res.data.data
          this.addDialogVisible = true
        })
      },
      // 提交编辑的信息
      submitEdit(userdata) {
        console.log('编辑用户信息', userdata);
        this.addDialogVisible = false
        memberApi.update(userdata).then(res => {
          console.log(res);
        })

      }
    },

    // 过滤器中不能引用当前实例，也就是不能使用this
    // 所以payTypeObj定义在vue实例外面
    filters: {
      payTypeFilter(Type) {
        const payObj = payTypeObj.find(item => item.type === Type);
        return payObj ? payObj.name : "";
      }
    }
  };
</script>

<style lang='less' scoped>
  .demo-form-inline {
    margin-top: 10px;
    width: 1100px;
  }

  .el-table {
    width: 100%;
  }

  .el-breadcrumb {
    width: 100%;
  }
</style>